<template>
	<view class="qq">
		<view class="eee" >+请上传身份证正面</view>
<view @click="test1" class="cc">
	<image :src="idCardFrontFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传身份证反面</view>
<view @click="test2" class="cc">
	<image :src="idCardBackFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传电工证正面</view>
<view @click="test3" class="cc">
	<image :src="workerCertFrontFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传电工证反面</view>
<view @click="test4" class="cc">
	<image :src="workerCertBackFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传驾驶证正面(非比填)</view>
<view @click="test5" class="cc">
	<image :src="driverLicenseFrontFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传行驶证面(非比填)</view>
<view @click="test6" class="cc">
	<image :src="driverLicenseBackFileUrl" mode="" class="bb"></image>
</view>
		<view class="eee" >+请上传车辆正面((非比填))</view>
<view @click="test7" class="cc">
	<image :src="carFrontFileUrl" mode="" class="bb"></image>
</view>
<view @click="uploadPicture"  class="oo">提交身份信息</view>
<view class="gg"></view>
	</view>
</template>
<script setup>
const uploadAliyun = require('../../components/aliyunOss/upload/uploadAliyun.js');
import pictureApi from '@/api/picture.js';
import { ref } from 'vue';
const idCardFrontFileUrl=ref("")
const idCardBackFileUrl=ref("")
const workerCertFrontFileUrl=ref("")
const workerCertBackFileUrl=ref("")
const driverLicenseFrontFileUrl=ref("")
const driverLicenseBackFileUrl=ref("")
const carFrontFileUrl=ref("")
// 上传图片oss
 function   test1() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/authentication",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
              console.log(res,"1");
				idCardFrontFileUrl.value=res.oss_file
              console.log(idCardFrontFileUrl.value,"idCardFrontFileUrl.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }
  function   test2() {
     // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
     uni.chooseMedia({
       count: 1,//最多可以选择几张图片
       mediaType: ['image/jpg'],//图片类型
       sourceType: ['album', 'camera'],//可从相机、相册拿取
       success: (res) => {
         // 重点！这个就是临时路径！
         const file = res.tempFiles[0].tempFilePath
         // console.log(res.tempFiles[0].tempFilePath)
         // 上传前,要确保临时路径是正确的(开始上传到OSS)
         // 对于此api参数，详见uploadAliyun.js文件
         uploadAliyun({
             // 微信文件临时路径
             // 只要涉及到上传,这东西就一定会有!
             filePath: file,
             // 目录层级(可自由填写)
             // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
             dir: "upload/authentication",
             // 文件名及扩展名(可自由填写)
             // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
             name: `${getFormat(file)}`,
             success: (res) => {
                console.log(res,"2");
  				idCardBackFileUrl.value=res.oss_file
				  console.log(idCardBackFileUrl.value,"idCardBackFileUrl.value")
             },
             fail: (err) => {
               console.log(err)
               console.log("上传失败")
             }
         })
       }
     })
   }
function   test3() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/authentication",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
               console.log(res,"3");
				workerCertFrontFileUrl.value=res.oss_file
				console.log(workerCertFrontFileUrl.value,"workerCertFrontFileUrl.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }
  function   test4() {
     // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
     uni.chooseMedia({
       count: 1,//最多可以选择几张图片
       mediaType: ['image/jpg'],//图片类型
       sourceType: ['album', 'camera'],//可从相机、相册拿取
       success: (res) => {
         // 重点！这个就是临时路径！
         const file = res.tempFiles[0].tempFilePath
         // console.log(res.tempFiles[0].tempFilePath)
         // 上传前,要确保临时路径是正确的(开始上传到OSS)
         // 对于此api参数，详见uploadAliyun.js文件
         uploadAliyun({
             // 微信文件临时路径
             // 只要涉及到上传,这东西就一定会有!
             filePath: file,
             // 目录层级(可自由填写)
             // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
             dir: "upload/authentication",
             // 文件名及扩展名(可自由填写)
             // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
             name: `${getFormat(file)}`,
             success: (res) => {
                console.log(res,"4");
  				workerCertBackFileUrl.value=res.oss_file
				  console.log(workerCertBackFileUrl.value,"workerCertBackFileUrl.value")
               console.log("上传成功")
             },
             fail: (err) => {
               console.log(err)
               console.log("上传失败")
             }
         })
       }
     })
   }
   function   test5() {
      // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
      uni.chooseMedia({
        count: 1,//最多可以选择几张图片
        mediaType: ['image/jpg'],//图片类型
        sourceType: ['album', 'camera'],//可从相机、相册拿取
        success: (res) => {
          // 重点！这个就是临时路径！
          const file = res.tempFiles[0].tempFilePath
          // console.log(res.tempFiles[0].tempFilePath)
          // 上传前,要确保临时路径是正确的(开始上传到OSS)
          // 对于此api参数，详见uploadAliyun.js文件
          uploadAliyun({
              // 微信文件临时路径
              // 只要涉及到上传,这东西就一定会有!
              filePath: file,
              // 目录层级(可自由填写)
              // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
              dir: "upload/authentication",
              // 文件名及扩展名(可自由填写)
              // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
              name: `${getFormat(file)}`,
              success: (res) => {
                 console.log(res,"5");
   				driverLicenseFrontFileUrl.value=res.oss_file
				   console.log(driverLicenseFrontFileUrl.value,"driverLicenseFrontFileUrl.value")
                console.log("上传成功")
              },
              fail: (err) => {
                console.log(err)
                console.log("上传失败")
              }
          })
        }
      })
    }
    function   test6() {
       uni.chooseMedia({
         count: 1,//最多可以选择几张图片
         mediaType: ['image/jpg'],//图片类型
         sourceType: ['album', 'camera'],//可从相机、相册拿取
         success: (res) => {
           // 重点！这个就是临时路径！
           const file = res.tempFiles[0].tempFilePath
           // console.log(res.tempFiles[0].tempFilePath)
           // 上传前,要确保临时路径是正确的(开始上传到OSS)
           // 对于此api参数，详见uploadAliyun.js文件
           uploadAliyun({
               // 微信文件临时路径
               // 只要涉及到上传,这东西就一定会有!
               filePath: file,
               // 目录层级(可自由填写)
               // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
               dir: "upload/authentication",
               // 文件名及扩展名(可自由填写)
               // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
               name: `${getFormat(file)}`,
               success: (res) => {
                  console.log(res,"6");
    				driverLicenseBackFileUrl.value=res.oss_file
					console.log(driverLicenseBackFileUrl.value,"driverLicenseBackFileUrl.value")
                 console.log("上传成功")
               },
               fail: (err) => {
                 console.log(err)
                 console.log("上传失败")
               }
           })
         }
       })
     }
    function   test7() {
       // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
       uni.chooseMedia({
         count: 1,//最多可以选择几张图片
         mediaType: ['image/jpg'],//图片类型
         sourceType: ['album', 'camera'],//可从相机、相册拿取
         success: (res) => {
           // 重点！这个就是临时路径！
           const file = res.tempFiles[0].tempFilePath
           // console.log(res.tempFiles[0].tempFilePath)
           // 上传前,要确保临时路径是正确的(开始上传到OSS)
           // 对于此api参数，详见uploadAliyun.js文件
           uploadAliyun({
               // 微信文件临时路径
               // 只要涉及到上传,这东西就一定会有!
               filePath: file,
               // 目录层级(可自由填写)
               // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
               dir: "upload/authentication",
               // 文件名及扩展名(可自由填写)
               // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
               name: `${getFormat(file)}`,
               success: (res) => {
                  console.log(res,"7");
    				carFrontFileUrl.value=res.oss_file
					console.log(carFrontFileUrl.value,"carFrontFileUrl.value")
                 console.log("上传成功")
               },
               fail: (err) => {
                 console.log(err)
                 console.log("上传失败")
               }
           })
         }
       })
     }
	 async function uploadPicture() {
		const res = await pictureApi.updateWorkerInfo(
			idCardFrontFileUrl.value,
			idCardBackFileUrl.value,
			workerCertFrontFileUrl.value,
			workerCertBackFileUrl.value,
			driverLicenseFrontFileUrl.value,
			driverLicenseBackFileUrl.value,
			carFrontFileUrl.value
		);
		console.log(res,"身份信息");
		if (res.success === true) {
			// 如果上传成功，则显示上传成功的提示
			uni.showLoading({
				title: '信息上传成功',
				duration: 3000 // 持续的时间
			});
			// 设置延时为3秒
			setTimeout(function() {
				// 3秒后切换到指定页面
				uni.switchTab({
					url: '/pages/index/index',
				});
			}, 3000);
		} else if (res.data === null) {
			// 如果上传失败，则显示上传失败的提示
			uni.showLoading({
				title: '信息上传失败',
				duration: 3000 // 持续的时间
			});
		}
	}
  /**
   * 获取文件扩展名
   * @description 由于微信临时路径都是一堆字母,所以拿到后缀后自己拼
   * @param {String} name - 文件完整名称(带后缀)
   * @return String
   */
  function getFormat(name) {
      return name.substring(name.lastIndexOf("/") + 1)
    }
</script>

<style lang="scss" scoped>
.gg{
	width: 100%;
	height: 50px;
}
.cc{
	width: 350px;
	border: 1px solid #c7c9ce;
	height: 200px;
}
.bb{
	width: 350px;
	height: 200px;
}
.qq{
	width: 90%;
	margin-left: 5%;
}
.eee{
	text-align: center;
	width: 100%;
	margin-top: 10px;
}
.oo{
  width: 100%;
  height: 30px;
  line-height: 30px;
color: #e73f32;
  border: 1px solid #e73f32;
  margin-top: 10px;
  text-align: center;
  border-radius: 5px;
}
</style>
